<template>
      <div>
            <div class="logo">
                  <img :src="logo" weight="34px" height="34px">
                  <h1>瓦特能源</h1>
            </div >
            <!-- :router="true"开启路由模式 -->
            <el-menu :router="true" :default-active="$route.path">
            <!-- 写一组组件，专门进行递归遍历的操作 -->
                  <menu-item v-for="item in menuitems" :item="item" :key="item.url"></menu-item>
            </el-menu>
      </div>
</template>
<script lang="ts" setup>
import { userUserStore } from '@/store/auth';
import MenuItem from './MenuItem.vue'
import logo from "@/assets/logo.png"     
const userStore = userUserStore();
const menuitems = userStore.menu;
console.log(userStore.menu)

</script>
<style scoped lang="less">
      .logo{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            padding: 10px 0;
            img {
                  margin-left: -10px;
            }
            h1 {
                  color: #333;
                  margin-left: 10px;
                  font-size: 30px;
            }
            // .el-menu-item {

            // }
      }
</style>